<template>
<div>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item >
      <el-input v-model="ename" placeholder="姓名"></el-input>
    </el-form-item>
    <el-form-item  >
      <el-select v-model="formInline.region" placeholder="工资状态">
        <el-option label="已审核" value="2"></el-option>
        <el-option label="未审核" value="1"></el-option>
      </el-select>
    </el-form-item>
    <!-- 时间框 -->
   <span class="demonstration"></span>
    <el-date-picker
      v-model="starttime"
      type="month"
      placeholder="开始时间">
    </el-date-picker> -
   <span class="demonstration"></span>
    <el-date-picker
      v-model="endtime"
      type="month"
      placeholder="结束时间">
    </el-date-picker>

    <el-form-item>
      <!-- 查询 -->
      <el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i></el-button>
      <!-- 导出工资 -->
       <el-button type="primary" @click="getsalary"><i class="el-icon-download"></i></el-button>
      <!-- 改变状态 -->
      <el-button type="danger" icon="el-icon-star-off" circle @click="changemany" ></el-button>
    </el-form-item>
  </el-form>

  <el-table
    :data="tableData"
    style="width: 100%"

    :row-class-name="tableRowClassName"
    >
     <el-table-column
      label="#"
      width="80">
      <template slot-scope="scope">
        <span style="margin-left: 10px">
            <!-- 复选框 -->
           <label for="label" @click="changestate(scope.row.sid)" v-if="scope.row.salstate == 1">
                <input type="checkbox" id="label" >
            </label>
          </span>
      </template>
    </el-table-column>

    <el-table-column
      label="姓名"
      width="130">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.emp.ename }}</span>
      </template>
    </el-table-column>

  <el-table-column
      label="基本薪资"
      width="130">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.sal }}</span>
      </template>
  </el-table-column>

    <el-table-column
      label="业务薪资"
      width="130">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.commission }}</span>
      </template>
  </el-table-column>

   <el-table-column
      label="总薪资"
      width="150">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.commission*1 + scope.row.sal*1  }}</span>
      </template>
  </el-table-column>

 <el-table-column
      label="日期"
      width="140">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.saltime|datechange }}</span>
      </template>
  </el-table-column>

  <el-table-column
      label="状态"
      width="150">
      <template slot-scope="scope">
        <span style="margin-left: 10px" v-if="scope.row.salstate == 1">未审核</span>
         <span style="margin-left: 10px" v-if="scope.row.salstate == 2">已审核</span>
      </template>
  </el-table-column>


    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row)" v-if="scope.row.salstate == 1">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)" v-if="scope.row.salstate == 1">审核</el-button>

         <el-button
          size="mini"
          type="info"
          @click="handleEdit2(scope.row)" v-if="scope.row.salstate != 1">撤销</el-button>
        <el-button
          size="mini"
          type="success"
         v-if="scope.row.salstate != 1">已审核</el-button>

      </template>
    </el-table-column>
  </el-table>
    <el-dialog title="修改薪资" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="基本薪资" :label-width="formLabelWidth">
          <el-input v-model="sal" autocomplete="off"></el-input>
        </el-form-item>

         <!-- <el-form-item label="业务薪资" :label-width="formLabelWidth">
          <el-input v-model="commission" autocomplete="off"></el-input>
        </el-form-item> -->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditok">确 定</el-button>
      </div>
    </el-dialog>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="sum">
        </el-pagination>
      </div>

  </div>
</template>


<style>
 /* 表的颜色 */
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }

 
</style>


<script>
  export default {
    // 时间显示过滤器
  filters:{
          "datechange":function(value){
              const val = value.substr(0,10)
              return val;
          }
      },
    created() {
        this.list();
    },
    data() {
      return {
       
         //搜索数据
          formInline: {
          user: '',
          region: ''
        },
         //日期
          starttime:'',
          endtime:'',
          starttime2:'',
          endtime2:'',
        // 列表展示数据
         tableData:"",
          ename:"",
         //复选框id
        sid2:'',
        sids:[],
        sids2:[],

        //修改员工薪资数据
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
        sal:"",
        commission:"",
        eid:"",
        sid:"",

        //分页数据
        current:1,
        size:5,
        sum:'', //记录总条数
      }
    },
    methods: {
    //表格颜色
     tableRowClassName({row, rowIndex}) {
        if (row.begin == 1) {
          return 'warning-row';
        } else if (row.salstate == 2) {
          return 'success-row';
        }
        return '';
    },
    //月份 9 => 09
    addZeroPrefixForMonth(month){
        return month < 10 ? '0' + month : month   
    },
    //导出工资
     getsalary() {
           const month = this.starttime;
          if(month == ""){ 
            const strMonth = "1900/01/00"
            this.starttime2 = strMonth
            }
          else{
             //初始化成日期对象
             const d = new Date(month)
             //拼接成2020-06
              this.starttime2 = d.getFullYear() +'/' +  this.addZeroPrefixForMonth(d.getMonth() + 1) +'/'+"00"
          }
          // （结束时间）
          const month2 = this.endtime;
          if(month2 == ""){
            this.endtime2 = "2200/01/01"
          }else{
          const d3 = new Date(month2)
          const endMonth = d3.getFullYear() +'/' +  this.addZeroPrefixForMonth(d3.getMonth() + 2) +'/'+"00"
          this.endtime2 = endMonth
          }
        //  this.$axios.get("/ever-salary/getsalary?ename="+this.ename+"&starttime="+this.starttime2+"&endtime="+this.endtime2+"&salstate="+this.formInline.region
        //   )

        this.$axios({ 
        method: 'post',
        // 请求地址
        url: "/ever-salary/getsalary?ename="+this.ename+"&starttime="+this.starttime2+"&endtime="+this.endtime2+"&salstate="+this.formInline.region, 
       
        // 表明返回服务器返回的数据类型
        responseType: 'blob'
      })
          .then(res => {
            alert("文件下载中")
            debugger;
            const content = res.data
            const blob = new Blob([content])
            const fileName = '员工工资表.xls'
            if ('download' in document.createElement('a')) { // 非IE下载
              const elink = document.createElement('a')
              elink.download = fileName
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click()
              URL.revokeObjectURL(elink.href) // 释放URL 对象
              document.body.removeChild(elink)
            } else { // IE10+下载
              navigator.msSaveBlob(blob, fileName)
            }
          })
      },  
      //列表展示
     list(){
          //获取出来的标准时间  (开始时间)
          const month = this.starttime;
          if(month == ""){ 
            const strMonth = "1900/01/00"
            this.starttime2 = strMonth
            }
          else{
             //初始化成日期对象
             const d = new Date(month)
             //拼接成2020-06
              this.starttime2 = d.getFullYear() +'/' +  this.addZeroPrefixForMonth(d.getMonth() + 1) +'/'+"00"
          }
          // （结束时间）
          const month2 = this.endtime;
          if(month2 == ""){
            this.endtime2 = "2200/01/01"
          }else{
          const d3 = new Date(month2)
          const endMonth = d3.getFullYear() +'/' +  this.addZeroPrefixForMonth(d3.getMonth() + 2) +'/'+"00"
          this.endtime2 = endMonth
          }

          let self = this
          this.$axios.post("/ever-salary/findAll?ename="+this.ename+"&current="+this.current+"&size="+this.size+"&starttime="+this.starttime2+"&endtime="+this.endtime2+"&salstate="+this.formInline.region
          )
          .then(res => {
              self.tableData = res.data
              //分页
              if( res.data.length == 0){ self.sum =0}
              self.sum = (res.data)[0].sum
               //将内存中的已经改变状态的rids清空     无法清空
              // self.rids = []
          })
    },
    // 审核一个
    handleDelete(row) {
        let sid = row.sid;
         let parm = {
          sid:sid,
        }
         this.$axios.put("/ever-salary/updateOne",parm
          )
          .then(res => {
             this.list()
          })
      },  
      //审核多个 
     changemany() {
        let sids= this.sids;
          this.$axios.put("/ever-salary/updateMany?sids="+this.sids
            )
            .then(res => {
              this.list()
            })
     },
      //编辑，修改一个人的薪资
       handleEdit(row) {
        this.sid = row.sid;
        this.eid = row.eid;
        this.sal = row.sal;
        this.commission = row.commission;
        this.dialogFormVisible = true
      },
      //确认修改一个人的薪资  
       handleEditok() {
       this.dialogFormVisible = false;
       let parm = {
          eid:this.eid,
          sal:this.sal,
          sid:this.sid,
        }
       this.$axios.post("/ever-salary/changeSalary",parm
          )
          .then(res => {
             this.list()
          })
      },
      //撤销审核
      handleEdit2(row) {
         this.$axios.get("/ever-salary/returnSalary?sid="+row.sid
          )
          .then(res => {
             this.list()
          })
      },
    //搜索方法
     onSubmit() {
        this.list();
      },
      //分页
      //每页几条
      handleSizeChange(val) {
        this.size = val
        this.onSubmit()
      },
      //第几页
      handleCurrentChange(val) {
        this.current = val;
        this.onSubmit()
      },
      //获取复选框中的数据
      changestate(sid){
          // 判断sid是否已经添加到 sids中
          if(this.sids.find(sid2=>sid2 == sid) > 0){
            //存在就删除
             this.sids.splice(this.sids.indexOf(sid),1);
             return
          }
          this.sids.push(sid)
      }
    }
  }
</script>